<template>
  <div v-if = "isshow">
    rights
  </div>
  <div v-else>
    <self-breadcrumb :bread-arr = "rightsArr"></self-breadcrumb>
    <el-card class = "box-card">
      <el-table
        :data = "rightsList"
        border
        stripe
        style = "width: 100%">
        <el-table-column
          type = "index"
          label = "#">
        </el-table-column>
        <el-table-column
          prop = "authName"
          label = "权限名称">
        </el-table-column>
        <el-table-column
          prop = "path"
          label = "路径">
        </el-table-column>
        <el-table-column
          prop = "level"
          label = "权限等级">
          <template slot-scope = "scope">
            <el-tag v-if = "scope.row.level=='0'">标签一</el-tag>
            <el-tag type = "success" v-else-if = "scope.row.level=='1'">标签二</el-tag>
            <el-tag type = "warning" v-else-if = "scope.row.level=='2'">标签三</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import SelfBreadcrumb from '../SelfBreadcrumb'

export default {
  name: 'Rights',
  components: {
    SelfBreadcrumb
  },
  created () {
    this.getRights()
  },
  data () {
    return {
      isshow: false,
      rightsArr: ['权限管理', '权限列表'],
      rightsList: []
    }
  },
  methods: {
    getRights () {
      this.$http.get('rights/list').then(ret => {
        const data = ret.data
        if (data.meta.status === 200 || data.meta.status === 201 || data.meta.status === 204) {
          this.$message.success(data.meta.msg)
          this.rightsList = data.data
        } else {
          this.$message.error(data.meta.msg)
          this.isshow = true
        }
      })
    }
  }
}
</script>

<style scoped lang = "less">
  .el-card {
    margin-top: 20px;
  }
</style>
